<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 定位概述</title>
    <style type="text/css">
        /*
         css 为定位和浮动
         定位的基本思想很简单。它允许你定义元素相对于正常元素应该出现的位置,或者相对于父元素,另一个元素,甚至浏览器窗口的位置
         div h1 p 等称为 块级元素意味着显示为一块内容
         span strong 等为行内框
         您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。
         还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
         但是一种情况下,即使没有显示定义,把一些文本添加到一个块级元素中 如 div 的开头 即使没有把这些文本定义为段落
         也会被当做段落对待
        */
        h2.pos_left{
            position: relative;
            left: -20px;
        }

        h2.pos_right{
            position: relative;
            right: 20px;
        }

        h2.pos_abs{
            position: absolute;
            left: 100px;
            top:150px;
        }
        p.one{
            position: fixed;
            left: 5px;
            top: 5px;
        }

        p.two{
            position: fixed;
            top:30px;
            right: 5px;
        }

        /*  这种全局的绝对定位 会影响到其他的选择  */
        /*img{*/
            /*position: absolute;*/
            /*top:0px;*/
            /*top:5%;*/
        /*}*/

        div.overflow{
            background-color: #00ffff;
            width: 150px;
            height: 150px;
            overflow: scroll;   /*  滑动的框来显示文本部分 */
            overflow: hidden;  /*  隐藏超出的部分  */
            overflow: auto;  /* autuo 默认是scroll的样式 */
        }

        p img.clip{
            position: absolute;
            clip: rect(50px,50px,100px,0px);  /*  剪切 p 中的img 元素  垂直方向开始点  水平方向开始点  截取的高度*/
        }

        p img.top{
            vertical-align: text-top;  /*  图片的顶部和文字对齐*/
        }

        p img.bottom{
            vertical-align: text-bottom;  /*  图片的底部和文字对齐 */
        }

        img.x{
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -1;
            z-index: 1;   /*  如果使用 1 就会覆盖 默认的 0 的img*/
        }


    </style>
</head>
<body>

    <!--  这里面 some text 被当做text 来对待-->
    <div>
        some text
        <p>Some more text.</p>
    </div>

    <!--  css 基本的定位机制 普通流 相对定位 浮动和绝对定位
          css  position 属性
          static 元素框正常生成
          relative 元素偏移某个距离
          absolute 从文档流中删除,并相对于其包含块定位
          fixed  相当于 改成absolute  不过包含块是视图本身
     -->

    <!--  测试relative 定位 -->
    <h2>这是位于正常位置的标题</h2>
    <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
    <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
    <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
    <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>

    <!--  测试绝对定位 absolute  -->
    <div>
        <h2 class="pos_abs">这是带有绝对定位的标题</h2>  <!--  不论是否在 div 中包含都是 绝对定位-->
        <p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
    </div>

    <!--   fixed 定位   -->
    <!--  会覆盖掉 其他的标签 相当于不在文档流中的一样  -->
    <p class="one">一些文本。</p>
    <p class="two">更多的文本</p>

    <!--  测试 img  -->
    <h1>This is a  Heading</h1>
    <img src="../images/eg_smile.gif" class="normal">
    <p>一些文本一些文本一些文本一些文本</p>

    <!--
     测试 overflow:scroll
    -->
    <p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为</p>
    <div class="overflow">
        这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，
        用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
    </div>

    <!--   测试使用 clip 属性剪切一张图片  -->
    <p>clip 属性剪切了一副图像:</p>
    <p><img class="clip" border="0" src="../images/eg_bookasp.gif"  width="120" height="150"/></p>

    <!--   段落中的图像  -->
    <p>
        这是一幅<img class="top" border="0" src="../images/eg_merglobe.gif"/>位于段落中的图像。
    </p>
    <p>
        这是一幅<img class="bottom" border="0" src="../images/eg_merglobe.gif"/>位于段落中的图像。
    </p>

    <!--  同一个 z-index  后面的会覆盖在第一个上面  -->
    <h1>这是一个标题</h1>
    <img class="x" src="../images/eg_mouse.jpg" />
    <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>

</body>
</html>